JS进阶 -- 面向对象(三)三面大旗 + 基础概念 + 总结
概述
面向对象是一种思维定势(套路),当遇到任何需求,都是用这一套思维解决。本篇我们进一步了解面向对象,主要了解面向对象的三面大旗,即封装 + 继承 + 多态,还有一些关于面向对象的概念
三面大旗
封装
封装即是隐藏细节,可以是 A 对 A 隐藏细节,也可以是 A 对 B 隐藏细节。任何一个函数都是封装
- A - A ==> 封装函数,解决自己的思想负担,需要使用时只需要调用自己封装的函数即可
- A - B ==> 例如一些第三方库(jQuery 的作者对于使用 jQuery 的人),A 给 B 提供 API,B 使用 API,有助于合作 + 交流
面向对象可以实现封装,但不代表只有面向对象可以封装
继承
多态
多态使得一个东西灵活,如果没有多态,则经常要进行类型转换,指一个东西拥有两种甚至更多种属性
示例:div 同时是 Node + Element,可以调用两者任意的 API1
2div.childNodes // 子代节点 ==> div 作为 Node 使用
div.child // 元素节点 ==> div 作为 Element 使用
JavaScript 是动态语言,所有东西都是多态,所有东西都有多个状态
基础概念
面向对象是把一组数据结构和处理它们的方法组成对象(Object),把相同行为的对象归纳为类(Class),通过类的封装(Encapsulation)隐藏内部细节,通过继承(Inheritance)实现类的特化(Specialization)/泛化(Generalization),通过多态(Polymorphism)实现基于对象类型的动态分派(Dunamic Dispatch)
面向对象是一套经验(套路)。它可以使得我们更快、更好的进行开发
Namespace 命名空间
它是一种可以捆绑功能的容器,经常是一个对象,可以为这个对象添加属性和方法,这个对象就是命名空间,例如 window.jQuery
Class 类
定义对象的特征,它是对象属性和方法的模板定义
Object 对象
类的一个实例
Property 属性
对象的特征,比如大小
Method 方法
对象的能力,比如行走
Constructor 构造函数
对象初始化的瞬间,被调用的方法,通常它的名字和包含它的类一致
Inheritance 继承
一个类可以继承另一个类的特征
Encapsulation 封装
把数据和相关的方法绑定在一起使用的方法
Abstraction 抽象
结合复杂的继承、方法和属性的对象可以模拟现实的模型
Polymorphism 多态
不同的类可以定义为相同的方法或属性
总结
JavaScript 实现面向对象
JavaScript 中的面向对象都是对于复杂类型(Object)而言的,JavaScript 中 Object 又主要分为 普通对象 + Array + Function
,JavaScript 中没有类的概念,所以 JavaScript 中使用原型(__proto__
,原型链)实现继承
代码层面的面向对象
1 | function Person( name ){ |
这就是代码层面的面向对象,function Person(){}
就是调用的函数, Person.prototype.say = function(){}
就是你生成的新对象的原型方法
面向对象解决的问题
- 组件化。使得代码划分明确,作用清晰
- 调用时只需要
new
,即可把公共属性 + 私有属性继承 - 每一个
new
之间互不影响,之后便可以添加自己的属性(也可覆盖公共属性)
相关知识点
命名空间
1 | var app = app || {} |
我们先来了解下 &&
和 ||
这两个操作符的含义。这两个操作符返回的是一个 truey | falsey 值
&& 操作符
|| 操作符
所以当我们使用 var app = app || {}
这种写法是最佳实践,因为如果在这个语句之前,app
就有了定义,那么这个语句不会覆盖之前的定义。